﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>管理员管理</title>
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <link href="../../scripts/honeySwitch/honeySwitch.css" type="text/css" rel="stylesheet"/>
    <script src="../../scripts/honeySwitch/honeySwitch.js"></script>

</head>
<body>
<div class="mini-toolbar" style="padding:2px;border-bottom:0;">
    <table style="width:100%;">
        <tr>
            <td style="width:100%;">
                <a class="mini-button" iconCls="icon-add" plain="true" onclick="openAddDialog()">增加</a>
                <a class="mini-button" iconCls="icon-edit" plain="true" onclick="openEditDialog()">编辑</a>
            </td>
            <td style="white-space:nowrap;">
                <label for="role-combo">角色: </label>
                <input id="role-combo" name="role-search" class="mini-combobox" valueField="id" textField="name"
                       showNullItem="true"/>
            </td>
            <td style="white-space:nowrap;">
                <label for="status-combo">状态: </label>
                <input id="status-combo" class="mini-combobox" data="Status" valueField="id" textField="text"
                       showNullItem="true"/>
            </td>
            <td style="white-space:nowrap;">
                <label for="keywords">关键词: </label>
                <input id="keywords" class="mini-textbox" emptyText="ID,姓名,账号"
                       style="width:230px;" onenter="onKeyEnter"/>
                <a class="mini-button" onclick="search()">查询</a>
            </td>
        </tr>
    </table>
</div>
<div class="mini-fit">
    <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
         ajaxType="get" idField="id" onload="onLoadError"
         sizeList="[5,10,20,50,100]" pageSize="20"
         dataField="data.records" totalField="data.total">
        <div property="columns">
            <div field="id" width="20" headerAlign="center" align="center">ID</div>
            <div field="account" width="80" headerAlign="center" align="center">帐号</div>
            <div field="name" width="80" headerAlign="center" align="center">姓名</div>
            <div field="roleNames" width="120" headerAlign="center" align="center">角色</div>
            <div field="status" width="60" headerAlign="center" renderer="onStatusRenderer" align="center">状态</div>
            <div field="lastIp" width="120" headerAlign="center" align="center">最后登录IP</div>
            <div field="lastTime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" align="center">
                最近登录时间
            </div>
            <div field="createTime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" align="center">
                创建日期
            </div>
        </div>
    </div>
</div>

<div id="add-admin-dialog" class="mini-window" title="添加管理员" style="width:380px;"
     showModal="true" allowDrag="true">
    <div id="add-form" class="form">
        <input labelField="true" label="帐号：" name="account" class="mini-textbox" required="true"
               requiredErrorText="帐号不能为空"/>
        <input labelField="true" label="姓名：" name="name" class="mini-textbox" required="true"
               requiredErrorText="姓名不能为空"/>
        <input labelField="true" label="密码：" name="pwd" class="mini-password" vtype="rangeLength:6,18" required="true"
               minLengthErrorText="密码不能少于6个字符"/>
        <input labelField="true" label="角色：" id="add-roleId-combo" name="roles" class="mini-combobox" ajaxType="get"
               valueField="id" textField="name" multiSelect="true" required="true" minLengthErrorText="角色不能为空"/>
        <div class="form-switch">
            <label>状态：</label>
            <span name="form-status-sw" class="switch-on" themeColor="#6d9eeb" style="zoom:0.45;">
                <input class="mini-hidden" name="status" value="true">
            </span>
        </div>
        <div class="form-btn-div">
            <a class="mini-button btn" iconCls="icon-ok" onclick="addAdmin()">保存</a>
        </div>
    </div>
</div>

<div id="edit-admin-dialog" class="mini-window" title="编辑管理员" style="width:380px;"
     showModal="true" allowDrag="true">
    <div id="edit-form" class="form">
        <input class="mini-hidden" name="id"/>
        <input labelField="true" label="姓名：" name="name" class="mini-textbox" required="true"
               requiredErrorText="姓名不能为空"/>
        <input labelField="true" label="角色：" id="edit-roleId-combo" name="roles" class="mini-combobox"
               valueField="id" textField="name" multiSelect="true" required="true" minLengthErrorText="角色不能为空"/>
        <div class="form-switch">
            <label>状态：</label>
            <span name="form-status-sw" class="switch-on" themeColor="#6d9eeb" style="zoom:0.45;">
                <input class="mini-hidden" name="status">
            </span>
        </div>
        <div class="form-btn-div">
            <a class="mini-button btn" iconCls="icon-ok" onclick="editAdmin()">保存</a>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 状态下拉框数据
    let Status = [{id: true, text: '正常'}, {id: false, text: '禁用'}];

    mini.parse();

    let header = {Authorization: $.cookie(TOKEN_KEY)};
    // 角色下拉框
    let roleCombo = mini.get("role-combo");
    roleCombo.setAjaxOptions({
        headers: header
    });
    roleCombo.setUrl(`${SYS_API_PREFIX}/auth/role/simlist`);


    // 表格
    let grid = mini.get("datagrid1");
    grid.setUrl(`${SYS_API_PREFIX}/auth/admin/list`);
    grid.setAjaxOptions({
        headers: header
    });
    grid.load();
    //表格渲染完毕后渲染开关控件
    grid.on("update", function (e) {
        // 开关控件初始化
        switchInitForGrid("admin", grid);
    });

    // 搜索
    function search() {
        let keywords = mini.get("keywords").getValue();
        let status = mini.get("status-combo").getValue();
        let roleId = roleCombo.getValue();
        grid.load({keywords: keywords, status: status, roleId: roleId});
    }

    // 回车搜索
    function onKeyEnter(e) {
        search();
    }

    function openAddDialog() {
        let rCombo = mini.get("add-roleId-combo");
        rCombo.setAjaxOptions({
            headers: header
        });
        rCombo.setUrl(`${SYS_API_PREFIX}/auth/role/simlist`);

        setSwitch("#add-admin-dialog span[name='form-status-sw']", true);
        mini.get("add-admin-dialog").show();
    }

    function openEditDialog() {
        let row = grid.getSelected();
        if (!row) {
            mini.alert("请选择要编辑的行");
            return;
        }
        let rCombo = mini.get("edit-roleId-combo");
        rCombo.setAjaxOptions({
            headers: header
        });
        rCombo.setUrl(`${SYS_API_PREFIX}/auth/role/simlist`);

        setSwitch("#edit-admin-dialog span[name='form-status-sw']", row.status);

        mini.get("edit-admin-dialog").show();
        let form = new mini.Form("#edit-form");
        form.setData(row);
    }

    function addAdmin() {
        let form = new mini.Form("#add-form");
        if (form.validate()) {
            let url = `${SYS_API_PREFIX}/auth/admin/add`;
            let data = mini.encode(form.getData());
            ajaxRequest(url, METHOD.POST, data, CONTENT_TYPE_JSON, function (res) {
                showTipsSuccess("添加成功!");
                mini.get("add-admin-dialog").hide();
                grid.reload();
            });
        }
    }

    function editAdmin() {
        let form = new mini.Form("#edit-form");
        if (form.validate()) {
            let url = `${SYS_API_PREFIX}/auth/admin/edit`;
            let data = mini.encode(form.getData());
            console.log(form.getData());
            ajaxRequest(url, METHOD.PUT, data, CONTENT_TYPE_JSON, function (res) {
                showTipsSuccess("修改成功!");
                mini.get("edit-admin-dialog").hide();
                grid.reload()
            });
        }
    }

    $(function () {
        switchInitForForm();
    });
</script>
</body>
</html>
